<template>
    <div class="statistic">
        <el-card>
            <div slot="header" class="header-center">今日销量和订单量</div>
            <div class="content-center">
                <h3 class="cool-heading">今日销量: {{ todaySales }}</h3>
                <h3 class="cool-heading">今日订单量: {{ todayOrders }}</h3>
            </div>
        </el-card>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <div id="todayChart" class="chart-box"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div id="mountChart" class="chart-box"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card>
                    <div id="mountEveryChart" class="chart-box"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
// 如果有需要处理的逻辑，可以在这里编写
export default {
    data() {
        return {
            todayChart: null,
            mountChart: null,
            mountEveryChart: null,
            todaySales: 0,
            todayOrders: 0,
            monthEntire: {
                turnover: 0,
                orderQuantity: 0
            },
            turnoverArray:[],
            orderQuantityArray:[]
        }
    },
    mounted() {
        this.getToday()
        
    },
    activated() {
        this.getToday()
        this.getMonthEntire()
        this.getMonthEvery()
        // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
        if (this.todayChart) {
            this.todayChart.resize()
        }
        if (this.mountChart) {
            this.mountChart.resize()
        }
        if (this.mountEveryChart) {
            this.mountEveryChart.resize()
        }


    },
    methods: {
        getToday() {
            this.$http({
                url: this.$http.adornUrl('/web/statistic/today'),
                method: 'get',
            }).then(({ data }) => {
                this.todaySales = data.today.turnover
                this.todayOrders = data.today.orderQuantity
                this.initTodayChart()
            })

        },
        getMonthEntire() {
            this.$http({
                url: this.$http.adornUrl('/web/statistic/month/entire'),
                method: 'get',
            }).then(({ data }) => {
                this.monthEntire.turnover = data.month.turnover
                this.monthEntire.orderQuantity = data.month.orderQuantity
                this.initMountChart()
            })
        },
        getMonthEvery() {
            this.$http({
                url: this.$http.adornUrl('/web/statistic/month'),
                method: 'get',
            }).then(({ data }) => {
                let every = data.month
                every.sort((a, b) => a.date - b.date);
                this.turnoverArray = every.map(item => item.turnover);
                this.orderQuantityArray = every.map(item => item.orderQuantity);
                this.initMountEveryChart()
            })
        },
        initTodayChart() {
            var option;
            const colors = ['#5470C6', '#91CC75', '#EE6666'];
            const sales = [this.todaySales]
            const orders = [this.todayOrders]
            option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {

                    right: '25%',
                    top: '25%',
                    // bottom: '10%',
                    containLabel: true, // 是否包含坐标轴的刻度标签
                    width: '40%', // 数据展示区宽度
                    height: '75%' // 数据展示区高度
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['销量', '订单量']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        // prettier-ignore
                        data: ['今日']
                    }

                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '销量',
                        position: 'right',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}元'
                        }
                    },
                    {
                        type: 'value',
                        name: '订单量',
                        position: 'right',
                        alignTicks: true,
                        offset: 80,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}单'
                        }
                    }
                ],
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [sales[0]]
                    },
                    {
                        name: '订单量',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [orders[0]]

                    }
                ]
            };
            this.todayChart = echarts.init(document.getElementById('todayChart'))
            this.todayChart.setOption(option)
            window.addEventListener('resize', () => {
                this.todayChart.resize()
            })
        },
        initMountChart() {
            var option;
            const colors = ['#5470C6', '#91CC75', '#EE6666'];
            option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {

                    right: '25%',
                    top: '25%',
                    // bottom: '10%',
                    containLabel: true, // 是否包含坐标轴的刻度标签
                    width: '40%', // 数据展示区宽度
                    height: '75%' // 数据展示区高度
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['销量', '订单量']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        // prettier-ignore
                        data: ['本月']
                    }

                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '销量',
                        position: 'right',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}元'
                        }
                    },
                    {
                        type: 'value',
                        name: '订单量',
                        position: 'right',
                        alignTicks: true,
                        offset: 80,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}单'
                        }
                    }
                ],
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [
                            this.monthEntire.turnover
                        ]
                    },
                    {
                        name: '订单量',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [
                            this.monthEntire.orderQuantity
                        ]
                    }
                ]
            };
            this.mountChart = echarts.init(document.getElementById('mountChart'))
            this.mountChart.setOption(option)
            window.addEventListener('resize', () => {
                this.mountChart.resize()
            })
        },
        initMountEveryChart() {
            var option;
            const colors = ['#5470C6', '#91CC75', '#EE6666'];
            option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {

                    //right: '25%',
                    top: '25%',
                    // bottom: '10%',
                    containLabel: true, // 是否包含坐标轴的刻度标签
                    width: '80%', // 数据展示区宽度
                    height: '75%' // 数据展示区高度
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['销量', '订单量']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        // prettier-ignore
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '销量',
                        position: 'right',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}元'
                        }
                    },
                    {
                        type: 'value',
                        name: '订单量',
                        position: 'right',
                        alignTicks: true,
                        offset: 80,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}单'
                        }
                    }
                ],
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: this.turnoverArray
                    },
                    {
                        name: '订单量',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: this.orderQuantityArray
                    }
                ]
            };
            this.mountEveryChart = echarts.init(document.getElementById('mountEveryChart'))
            this.mountEveryChart.setOption(option)
            window.addEventListener('resize', () => {
                this.mountEveryChart.resize()
            })
        }

    }

}
</script>

<style scoped>
/* 使 el-card 的 header 居中 */
.header-center {
    text-align: center;
    padding: 0 0;
}

/* 创建一个类来使 div 内容居中 */
.content-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -30px;
    margin-bottom: -10px;
    height: 50%;
    /* 确保内容区域填满卡片高度 */
    flex-direction: column;
    /* 垂直堆叠内容 */
}

/* 为 h1 添加酷炫样式 */
.cool-heading {
    color: #3498db;
    /* 更改文本颜色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    /* 添加文本阴影 */
    margin-bottom: 0px;
    /* 添加底部外边距 */
    transition: all 0.3s ease;
    /* 添加过渡效果 */
}

/* 可选：为 cool-heading 添加鼠标悬停效果 */
.cool-heading:hover {
    transform: scale(1.05);
    /* 鼠标悬停时放大 */
    color: #e74c3c;
    /* 颜色变化 */
}

.statistic {
    >.el-alert {
        margin-bottom: 10px;
    }

    >.el-row {
        margin-top: -5px;
        margin-bottom: -5px;

        .el-col {
            padding-top: 5px;
            padding-bottom: 5px;
        }
    }

    .chart-box {
        min-height: 200px;
    }
}
</style>